import React, { Suspense } from 'react';
import { Layout } from 'antd';
import Link from 'umi/link';

import logo from '@/assets/images/logo-mini.png'
import logoName from '@/assets/images/logoName.png'

import styles from './styles.less';
import PageLoading from '../PageLoading';
import ErrorBoundary from '../ErrorBoundary';
import { connect } from 'dva';

import { env } from '@/config/query';

export interface IMenu {
  name: string,
  id: number,
  url?: string,
  children?: Array<IMenu>
}

const { Sider } = Layout;

export interface IProps {
  menu: Array<IMenu>;
  collapsed?: boolean;
}

const BaseMenu = React.lazy(() => import('./BaseMenu'));

@connect(({ global }) => ({
  collapsed: global.collapsed
}))
class SiderMenu extends React.PureComponent<IProps> {

  render() {
    const menu = this.props.menu;

    return (
      <>
        {
          Array.isArray(menu) && (
            <Sider width={190} 
              style={{ background: '#fff' }} 
              collapsible 
              collapsed={this.props.collapsed} 
              trigger={null}
            >
              <div className={styles.logo} id="logo">
                <Link to="/home">
                  <img src={env === 'prew' ? null : logo}  />
                  <img src={env === 'prew' ? null : logoName}  style={{ marginLeft: '10px', display: 'inline-block' }}/>
                </Link>
              </div>
              <ErrorBoundary>
                <Suspense fallback={<PageLoading />}>
                  <BaseMenu menu={this.props.menu} />
                </Suspense>
              </ErrorBoundary>
            </Sider>
          )
        }
      </>
    )
  }
}

export default SiderMenu;
